<template>
  <div class="app-container">

    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="文章标题">
              <el-input v-model="formLabelAlign.Title"></el-input>
            </el-form-item>
            <el-form-item label="标签">
              <el-select v-model="formLabelAlign.Tag" multiple placeholder="请选择标签">
                <el-option
                  v-for="item in tagList"
                  :key="item.Id"
                  :label="item.Title"
                  :value="item.Id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择分类">
              <el-select v-model="formLabelAlign.Nav" placeholder="请选择分类">
                <el-option v-for="item in navList" :key="item.Id" :label="item.Title" :value="item.Id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin: 10px 0 " @click="getHtml()">保存文章</el-button>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover">
          <mavon-editor style="height: 500px" v-model="value" @change="saves" :ishljs="true"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

// 导航栏就是分类
import {getNavList} from '@/api/nav'
import {getTagList} from '@/api/tag'
import {addArticle} from '@/api/article'

export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        Title: '',
        Tag: '',
        Nav: ''
      },
      Content: '',
      navList: [],
      tagList: [],
      value: '',
      ContentHtml: ''
    };
  },
  created() {
    this.getNav()
    this.getTag()
  },
  methods: {
    getHtml() {
      addArticle(
        {
          'ContentHtml': this.ContentHtml,
          'Content': this.Content,
          ...this.formLabelAlign
        }
      ).then(con => {
        console.log(con)
      })
    },
    getNav() {
      getNavList().then(con => {
        this.navList = con.data.splice(1, 6)
      })
    },
    getTag() {
      getTagList().then(con => {
        this.tagList = con.data
        console.log(this.tagList)
      })
    },
    saves(e, con) {
      console.log(e)
      this.ContentHtml = e
      this.Content = con
    }
  }
}
</script>
